<template>
	<view class="settlement">
		<!-- 总计 -->
		<u-card box-shadow="-2px 4px 5px #d1d3e0" margin="20rpx">
			<view class="cardTemplate" slot="body">
				<view class="left">
					<view class="name">共计{{orderData.num}}道菜</view>
					<view class="price">￥{{orderData.totalPrice}}</view>
				</view>
				<view class="right">
					桌号:{{tableNum}}
				</view>
			</view>
		</u-card>

		<!-- 菜品 -->
		<u-card box-shadow="-2px 4px 5px #d1d3e0" margin="20rpx">
			<view class="cardTemplate" slot="body">
				<view class="good" v-for="item in orderData.cartList" :key="item._id">
					<view class="left">
						<view class="img">
							<image :src="baseURL + item.thumb" mode="aspectFit"></image>
						</view>
						<view class="info">
							<view class="title">{{item.title}}</view>
							<view class="proce">￥{{item.price}}</view>
						</view>
					</view>
					<view class="right">×{{item.num}}</view>
				</view>
			</view>
		</u-card>

		<!-- 备注 -->
		<u-card box-shadow="-2px 4px 5px #d1d3e0" margin="20rpx">
			<view class="cardTemplate" slot="body">
				<u-input placeholder="请输入备注" v-model="remarks" type="textarea" autoHeight />
			</view>
		</u-card>

		<!-- 支付成功 -->
		<u-toast ref="uToast" />

		<!-- 键盘 -->
		<Payment ref="payment" :show="show" :money="orderData.totalPrice" @pay="submit" />

		<u-button class="submitBtn" type="success" :ripple="true" shape="circle" @click="$refs.payment.show()">支付</u-button>
	</view>
</template>

<script>
	import Payment from '../../components/Payment.vue'
	import {
		addOrder
	} from '../../api/api.js'
	import {
		sendSocketMessage
	} from '../../utils/common.js'
	import {
		baseURL
	} from '../../api/request.js'

	export default {
		components: {
			Payment
		},
		data() {
			return {
				baseURL,
				remarks: '',
				orderData: {},
				tableNum: getApp().globalData.tableNum,
				show: false,
			}
		},
		methods: {
			async submit(pw) {
				// return 
				let data = {
					price: this.orderData.totalPrice,
					num: this.orderData.num,
					remarks: this.remarks,
					tableNum: this.tableNum,
					password: pw
				}
				let menuItem = []
				this.orderData.cartList.forEach(v => menuItem.push(v))
				data.menuItem = menuItem
				const res = await addOrder(data)
				this.$refs.uToast.show({
					title: res.msg,
					type: 'success',
				})
				this.$refs.payment.hide()
				sendSocketMessage(res.data._id)
				setTimeout(() => {
					uni.redirectTo({
						url: '../order/order_details?_id=' + res.data._id
					})
				}, 2000)
			}
		},
		onLoad() {
			this.orderData = getApp().globalData.cartData
			console.log(this.orderData);
		}
	}
</script>

<style scoped lang="scss">
	.settlement {
		.cardTemplate {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;

			.good {
				width: 100%;
				display: flex;
				margin: 20upx 0;
				justify-content: space-between;
				align-items: center;
				height: 150upx;
				padding: 0 30upx;
				border-bottom: 1px solid #dedede;

				.left {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 100%;

					.img {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 150upx;
						height: 100%;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.info {
						padding: 20upx 0;
						display: flex;
						flex-wrap: wrap;
						align-content: space-between;
						justify-content: flex-start;
						height: 100%;
						margin-left: 20upx;
						font-weight: bold;

						view {
							width: 100%;
							text-align: left;
						}
					}
				}

				.right {
					font-size: 16px;

					button {
						font-size: 16px;
						margin: 0 10upx;
					}

					.reduce {
						background-color: #fff;
						border: 1px solid #39b54a;
						color: #39b54a;
					}
				}
			}

			u-input {
				width: 100%;
			}
		}
	}
</style>
